<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenBot Controller</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link rel="icon" href="icons/controller_blue.svg">
    <link rel="stylesheet" href="style.css">
    <script src="index.js" type="module"></script>
    <script src="buttons.js" type="module"></script>
</head>

<body>
    <!-- Top Bar -->
    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center; background: #0071C5; padding: 0 4rem; height: 5rem;">
        <!-- Logo -->
        <div style="display: flex; align-items: center;">
            <img id="controller" src="icons/controller.svg" style="margin-right: 1em;" width="60" />
            <div style="display: flex; flex-direction: column; color: white">
                <p style="margin: 0; font-family: Gilroy-Medium, sans-serif; font-size: 1.3rem">OpenBot</p>
                <p style="font-size: 1.2rem;">Controller</p>
            </div>
        </div>
        <!-- Error Display -->
        <div>
            <span id="error-message" style="color: white;"></span>
        </div>
    </div>
    
    <div id="video-panel" style="display:flex; align-items: center; justify-content: center; height: calc(100vh - 5rem);">
        
        <div class="video-container">
            <!-- "muted" attributed is needed, otherwise most browsers will not auto-stream the video. -->
            <div style="width: 100%; height: 100%; position: relative;">
                <video id='video' muted autoplay playsinline"></video>
                <div id="buttons" style="display:flex; flex-direction: row; justify-content: left; align-items: start; gap: 1em; margin: 1em 0; position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); background: white; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); padding: 5px;">
                    <img id="sound_button" class="button" src="icons/volume_off_black_24dp.svg" width="30" />
                    <img id="mirror_button" class="button" src="icons/flip_black_24dp.svg" width="30" />
                    <img id="camera_switch_button" class="button" src="icons/cameraswitch_black_24dp.svg" width="30" />
                    <img id="fullscreen" class="button" src="icons/fullscreen_black_24dp.svg" width="30" />
                </div>
            </div>
            <!-- Command Sidebar -->
            <ul id="command-list" style="list-style-type: none; background: white; border-radius: 4px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); padding: 15px; margin: 0; width: fit-content; max-height: 100%; min-height: 100%; min-width: 200px; overflow-y: auto;">
                <h3>Controls</h3>
            </ul>

        </div>
        
    </div>
</body>

</html>